<template>
  <div class="number-range">
    <ElInputNumber
      class="number-range-item"
      :modelValue="props.start"
      :max="props.end"
      controls-position="right"
      @update:modelValue="onChangeStart"
    />
    -
    <ElInputNumber
      class="number-range-item"
      :modelValue="props.end"
      :min="props.start"
      controls-position="right"
      @update:modelValue="onChangeEnd"
    />
  </div>
</template>

<script setup lang="ts">
import { ElInputNumber } from 'element-plus'
interface Props {
  start?: number;
  end?: number;
}
interface Emits {
  'update:start': [number];
  'update:end': [number]
}
const props = defineProps<Props>()

const emits = defineEmits<Readonly<Emits>>()

const onChangeStart = (e) => {
  emits('update:start', e)
}

const onChangeEnd = e => {
  emits('update:end', e)
}
</script>

<style lang="scss" scoped>
.number-range {
  display: flex;
  align-items: center;
  &-item {
    width: auto;
  }
}
</style>
